.applet-dashboard {
	.table-dense.card {
		padding-left: 40px;
		background-color: transparent;
		.el-card.is-hover-shadow:focus,
		.el-card.is-hover-shadow:hover {
			box-shadow: none;
		}
		.checked-box {
			display: none !important;
		}
	}
	.el-card,
	.el-card__body {
		height: 100%;
		background-color: transparent;
		border: none;
		box-shadow: none;
		&::after {
			background-color: transparent;
			box-shadow: none;
		}
		.applet-card {
			position: relative;
			height: 300px;
			.title {
				padding: 10px 15px;
				font-size: 16px;
			}

			// margin-top: 40px;
			// margin-right: 40px;
			&:hover {
				.applet-container {
					display: block;
				}
			}
			.applet-container {
				position: absolute;
				top: 0;
				left: 0;
				display: none;
				width: 100%;
				height: 100%;
				background-color: #00000090;
				.goto-btn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}
.handle {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: rgb(0 0 0 / 70%);
	opacity: 0;
	transition: var(--el-transition-duration-fast);
	.preview-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		color: #ffffff;
		background-color: var(--el-color-primary);
		transform: translate(-50%, -50%);
		span {
			padding-left: 10px;
		}
	}
	.right-btn {
		position: absolute;
		top: 0;
		right: 10px;
		.el-link:hover {
			opacity: 0.8;
		}
		.el-link {
			padding: 10px;
			i {
				color: #e8e8e8;
			}
		}
	}
}
.applet-page {
	.applet-card {
		position: relative;
		height: 200px;
		box-shadow: none;
		.applet-container {
			position: absolute;
			width: 100%;
			height: 100%;
			.applet-img {
				// width: 120px;
				// height: 120px;
				.applet-icon {
					border-radius: 10px;
				}
			}
			.desc {
				align-items: center;
				height: 120px;
				overflow: hidden;
				cursor: pointer;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 6;
			}
		}
		.bg {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 300px;
			height: 180px;
			background-image: url("../../../../public/images/decoration/4.png");
			background-repeat: no-repeat;
			background-position: right bottom;
			background-size: contain;
		}
	}
	.applet-card:hover {
		background-color: var(--el-color-primary-light-9);
		.bg {
			background-image: url("../../../../public/images/decoration/4.png");
			animation: scale-img 5s ease-in-out infinite;
		}
		.applet-img {
			img {
				animation: rotate-img 5s infinite;
			}
		}

		@keyframes rotate-img {
			// 0% {
			// 	transform: rotate(0);
			// }
			// 100% {
			// 	transform: rotate(360deg);
			// }
		}
		@keyframes scale-img {
			0% {
				transform: scale(1);
			}
			25% {
				transform: translate(0, 0) scale(1.2);
			}
			50% {
				transform: scale(1);
			}
			75% {
				transform: translate(0, 0) scale(1.2);
			}
		}
	}

	@keyframes scale-img {
		0% {
			transform: scale(1);
		}
		25% {
			transform: scale(1.2);
		}
		50% {
			transform: scale(1);
		}
		75% {
			transform: scale(1.2);
		}
	}
}
.applet-type {
	width: 25px;
	height: 25px;
	margin-right: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.applet-type.applet {
	width: 20px;
	height: 20px;
	margin-left: 3px;
	background-image: url("../../assets/images/applet/applet.png");
}
.applet-type.docker {
	background-image: url("../../assets/images/applet/docker.png");
}
